<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>照片</title>
    <style>
        #app {
            width: 940px;
            padding: 0 20px;
            margin: 0 auto;
        }
        .a-container {
            padding: 0;
            margin: 10px 0;
        }

        .clearfix {
            zoom: 1;
        }

        .p-title {
            display: block;
            font-size: 1.17em;
            margin: 0;
            padding: 0;
            font-weight: bold;
        }

        .p-desc {
            font-size: 0.9em;
        }
    </style>
    <script src="vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div class="a-container">
            <!-- <input type="text" v-model="user"> -->
            <!-- <select v-model="user" @change="fetch_album_list">
            <option v-for="u in users" :value="u">{{ u }}</option>
        </select> -->
            <!-- <button @click="fetch_album_list">Fetch</button> -->
            <!-- <ul>
            <li v-for="s in album_list">{{ s.title }} / {{ s.href }}</li>
        </ul> -->
            {{ album_list.length }}个相册:
            <select v-model="album" @change="fetch_album">
                <option v-for="s in album_list" :value="s.href">{{ s.title }} ({{ s.n }}张)</option>
            </select>
        </div>

        <div v-for="img in imgs" class="clearfix">
            <div>
                <div class="p-title">{{ img.t }}</div>
                <div class="p-desc">{{ img.d }}</div>
            </div>
            <div>
                <img :src="img.src" :alt="img.alt" class="photo">
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>

</html>